<<<<<<< HEAD
import React, { memo, useCallback, useState } from 'react';

const slow = () => {
	const [count, setCount] = useState(0);
	const [count1, setCount1] = useState(0);

	const cb = useCallback(() => { setCount(count + 1); }, [count]);

	return (
		<div>
			<div onClick={() => setCount1(count1 + 2)}>{count1}</div>
			<div>{count}</div>
			<Button2 cb={() => setCount(count + 1)} />
		</div>
	);
};

const Button2 = memo(Button);

function Button({ cb }: { cb?: () => void; }) {
	console.log('button enter');
	return (<>
		<button className='w-30 p-2 bg-red-400 text-white' onClick={cb}>increase</button>
	</>);
}


export default slow;
=======
import React, { useState, useMemo, memo } from 'react';

const App = () => {
    const [count, setCount] = useState(0);
    const [count2, setCount2] = useState(0);
    return (
        <div>
            <div>count:{count}</div>
            <button className='p-2 text-white bg-red-400 border-red-400 border-solid rounded-md border-1' onClick={() => setCount(count + 1)}>increase</button>
            <div>count2:{count2}</div>
            <Slow cb={() => setCount2(count2 + 1)} />
        </div>
    );
};

const Slow2 = memo(Slow);

function Slow({ cb }: { cb: () => void; }) {
    const now = performance.now();
    while (performance.now() - now < 1000) { }
    console.log('slow rendered');
    return <button className='p-2 text-white bg-red-400 border-red-400 border-solid rounded-md border-1' onClick={cb}>increase2</button>;
}

export default App;
>>>>>>> b89c4de3e2810b89283e572bf89bba4f89609e2c
